function ForgotPasswordPage() {
    console.log('ForgotPasswordPage function called');
    const [email, setEmail] = React.useState('');
    const [verificationCode, setVerificationCode] = React.useState('');
    const [newPassword, setNewPassword] = React.useState('');
    const [confirmPassword, setConfirmPassword] = React.useState('');
    const [step, setStep] = React.useState(1); // 1: 输入邮箱, 2: 输入验证码和新密码
    const [loading, setLoading] = React.useState(false);
    const [error, setError] = React.useState('');
    const [success, setSuccess] = React.useState('');
    const [countdown, setCountdown] = React.useState(0);

    // 发送验证码倒计时
    React.useEffect(() => {
        if (countdown > 0) {
            const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
            return () => clearTimeout(timer);
        }
    }, [countdown]);

    const sendVerificationCode = async () => {
        if (!email) {
            setError('请输入邮箱地址');
            return;
        }
        
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            setError('请输入有效的邮箱地址');
            return;
        }

        setLoading(true);
        setError('');
        
        try {
            // 调用发送验证码API
            const response = await fetch(Utils.getApiUrl('/chm/api/auth/send-reset-code'), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                mode: 'cors',
                credentials: 'omit',
                body: JSON.stringify({
                    email: email
                })
            });

            const result = await response.json();

            if (result.status === 0) {
                setLoading(false);
                setCountdown(60); // 60秒倒计时
                setSuccess('验证码已发送到您的邮箱，请查收');
                setStep(2);
            } else {
                setLoading(false);
                setError(result.msg || '发送验证码失败');
            }
        } catch (error) {
            setLoading(false);
            setError('网络错误，请检查网络连接');
            console.error('发送验证码请求失败:', error);
        }
    };

    const resetPassword = async (e) => {
        e.preventDefault();
        setError('');
        setSuccess('');

        if (!verificationCode) {
            setError('请输入验证码');
            return;
        }

        if (!newPassword) {
            setError('请输入新密码');
            return;
        }

        if (newPassword !== confirmPassword) {
            setError('两次输入的密码不一致');
            return;
        }

        if (newPassword.length < 6) {
            setError('密码长度至少6位');
            return;
        }

        setLoading(true);

        try {
            // 调用重置密码API
            const response = await fetch(Utils.getApiUrl('/chm/api/auth/reset-password'), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                mode: 'cors',
                credentials: 'omit',
                body: JSON.stringify({
                    email: email,
                    code: verificationCode,
                    newPassword: newPassword
                })
            });

            const result = await response.json();

            if (result.status === 0) {
                setLoading(false);
                setSuccess('密码重置成功！正在跳转到登录页...');
                
                // 3秒后跳转到登录页
                setTimeout(() => {
                    window.location.href = 'login.html';
                }, 3000);
            } else {
                setLoading(false);
                setError(result.msg || '密码重置失败');
            }
        } catch (error) {
            setLoading(false);
            setError('网络错误，请检查网络连接');
            console.error('重置密码请求失败:', error);
        }
    };

    const goBack = () => {
        setStep(1);
        setError('');
        setSuccess('');
        setVerificationCode('');
        setNewPassword('');
        setConfirmPassword('');
        // 保留email信息
    };

    console.log('Rendering ForgotPasswordPage component, step:', step);
    
    return React.createElement('div', { className: 'auth-container' },
        React.createElement('div', { className: 'auth-header' },
            React.createElement('h1', null, '忘记密码'),
            React.createElement('p', null, 
                step === 1 ? '请输入您的邮箱地址以重置密码' : '请输入验证码并设置新密码'
            )
        ),

        error && React.createElement('div', { className: 'message error' }, error),
        success && React.createElement('div', { className: 'message success' }, success),

        step === 1 ? (
            React.createElement('div', null,
                React.createElement('div', { className: 'form-group' },
                    React.createElement('label', { htmlFor: 'email' }, '邮箱地址'),
                    React.createElement('input', {
                        type: 'email',
                        id: 'email',
                        value: email,
                        onChange: (e) => setEmail(e.target.value),
                        placeholder: '请输入您的邮箱地址'
                    })
                ),

                React.createElement('button', {
                    onClick: sendVerificationCode,
                    disabled: loading || countdown > 0,
                    className: `auth-btn ${(loading || countdown > 0) ? 'disabled' : ''}`
                }, countdown > 0 ? `重新发送(${countdown}s)` : (loading ? '发送中...' : '发送验证码'))
            )
        ) : (
            React.createElement('form', { onSubmit: resetPassword },
                // 显示用户邮箱确认信息
                React.createElement('div', { className: 'message', style: { backgroundColor: '#e0f2fe', border: '1px solid #b3e0ff' } },
                    React.createElement('p', { style: { margin: 0, color: '#0066cc' } }, 
                        React.createElement('span', { style: { fontWeight: 'bold' } }, '验证码已发送至：'),
                        email
                    )
                ),
                
                React.createElement('div', { className: 'form-group' },
                    React.createElement('label', { htmlFor: 'verificationCode' }, '验证码'),
                    React.createElement('input', {
                        type: 'text',
                        id: 'verificationCode',
                        value: verificationCode,
                        onChange: (e) => setVerificationCode(e.target.value),
                        placeholder: '请输入邮箱收到的验证码',
                        maxLength: 6
                    })
                ),

                React.createElement('div', { className: 'form-group' },
                    React.createElement('label', { htmlFor: 'newPassword' }, '新密码'),
                    React.createElement('input', {
                        type: 'password',
                        id: 'newPassword',
                        value: newPassword,
                        onChange: (e) => setNewPassword(e.target.value),
                        placeholder: '请输入新密码'
                    })
                ),

                React.createElement('div', { className: 'form-group' },
                    React.createElement('label', { htmlFor: 'confirmPassword' }, '确认密码'),
                    React.createElement('input', {
                        type: 'password',
                        id: 'confirmPassword',
                        value: confirmPassword,
                        onChange: (e) => setConfirmPassword(e.target.value),
                        placeholder: '请再次输入新密码'
                    })
                ),

                React.createElement('div', { className: 'form-group', style: { display: 'flex', gap: '10px' } },
                    React.createElement('button', {
                        type: 'button',
                        onClick: goBack,
                        className: 'auth-btn',
                        style: { 
                            flex: 1, 
                            backgroundColor: '#6b7280',
                            color: 'white'
                        }
                    }, '上一步'),

                    React.createElement('button', {
                        type: 'submit',
                        disabled: loading,
                        className: 'auth-btn',
                        style: { flex: 1 }
                    }, loading ? '重置中...' : '重置密码')
                )
            )
        ),

        React.createElement('div', { className: 'auth-link' },
            React.createElement('a', {
                href: 'login.html',
                className: ''
            }, '返回登录')
        )
    );
}

// 确保DOM加载完成后再渲染
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, rendering ForgotPasswordPage');
    const rootElement = document.getElementById('root');
    console.log('Root element:', rootElement);
    console.log('React:', typeof React);
    console.log('ReactDOM:', typeof ReactDOM);
    
    if (rootElement) {
        try {
            ReactDOM.render(React.createElement(ForgotPasswordPage), rootElement);
            console.log('React component rendered successfully');
            
            // 检查渲染后的DOM
            setTimeout(() => {
                const authContainer = document.querySelector('.auth-container');
                console.log('Auth container found:', authContainer);
                if (authContainer) {
                    console.log('Auth container styles:', window.getComputedStyle(authContainer));
                }
            }, 100);
        } catch (error) {
            console.error('Error rendering React component:', error);
        }
    } else {
        console.error('Root element not found');
    }
});